<template>
  <div>
    <a-button
      type="primary"
      @click="showModal"
    >Open Modal</a-button>
    <a-modal
      v-model:open="open"
      title="Basic Modal"
      @ok="handleOk"
      width="100%"
      wrap-class-name="full-modal"
    >

      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      hh
    </a-modal>

    <a-button @click="showConfirm">
      Confirm
    </a-button>
    <a-button @click="success">
      Info
    </a-button>
    <a-divider></a-divider>
    <a-button
      type="primary"
      @click="showModal1"
    >Open Modal</a-button>
    <a-modal
      v-model:open="open1"
      title="Basic Modal"
      width="100%"
      wrap-class-name="full-modal"
      @ok="handleOk1"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const open1 = ref(false);
const showModal1 = () => {
  open1.value = true;
};
const handleOk1 = e => {
  console.log(e);
  open1.value = false;
};
</script>
<script>
import { h } from 'vue'
export default {
  name: '',
  components: {},
  data() {
    return {
      open: false,
      loading: false
    }
  },
  created() { },
  mounted() { },
  methods: {
    showModal() {
      this.open = true
    },
    handleOk() {

      console.log(111);
    },
    showConfirm() {
      this.$confirm({
        title: 'Do you Want to delete these items?',
        content: ` Some descriptions`,
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    },
    handleCancel() {

    },
    success() {
      this.$confirm({
        title: 'This is a success message',
        content: '11',
        okText: '确认111',
        cancelText: '取消222',
      });
    },
  },
  computed: {}
}
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
